<template>
	<view class="root">
		<navigator
			url="/pages/main/setting"
			hover-class="tap-hover"
			hover-stay-time="50"
			:style="{ margin: `90rpx 46rpx 0` }"
			class="fd-row ai-center"
		>
			<image
				:src="userInfo.avatarUrl || `/static/img/default-avatar.png`"
				class="width-100 height-100 bgc-eee br-circle"
				mode="aspectFill"
			/>
			<view class="ml-18 f1">
				<label>
					<text class="fs-36 color-1b1b1b fw-700 f1">
						{{ userInfo.nickname || userInfo.mobile || "--" }}
					</text>
					<uni-icons type="gear-filled" size="24" color="#333" />
				</label>

				<text class="fs-28 color-666 mt-12">欢迎来到运输APP</text>
			</view>
		</navigator>

		<view class="fd-row color-fff" :style="{ margin: `80rpx 20rpx 0` }">
			<navigator
				v-if="userInfo.identity === 1"
				url="/pages/main/placeAnOrder"
				:style="{
					backgroundColor: `#2e54fd`,
					borderRadius: `100rpx 0 100rpx 0`,
					padding: `64rpx 42rpx 32rpx 54rpx`,
				}"
				class="f3 fw-700"
				hover-class="tap-hover"
				hover-stay-time="50"
			>
				<text class="fs-40">下单</text>
				<text class="mt-18 fs-28">hi，快来下单吧</text>
				<image
					:style="{ width: `130rpx`, height: `130rpx` }"
					src="/static/img/icon-hand.png"
					mode="aspectFit"
					class="as-end mt-22"
				/>
			</navigator>

			<view :class="[userInfo.identity === 1 ? 'ml-40' : 'fd-row', 'f2']">
				<navigator
					url="/pages/main/order"
					:class="[
						userInfo.identity === 1 ? '' : 'mr-10 lh-3',
						'f1 br-20 jc-center relative',
					]"
					:style="{ backgroundColor: `#feac0e`, padding: `16rpx 14rpx 16rpx 36rpx` }"
					hover-class="tap-hover"
					hover-stay-time="50"
				>
					<text class="fs-36 fw-600">订单</text>
					<image
						class="absolute right-16 bottom-16 width-46 height-46"
						src="/static/img/icon-order.png"
						mode="aspectFit"
					/>
				</navigator>

				<view
					:class="[
						userInfo.identity === 1 ? 'mt-20' : 'ml-10 lh-3',
						'f1 br-20 jc-center relative',
					]"
					:style="{ backgroundColor: `#ff7116`, padding: `16rpx 14rpx 16rpx 36rpx` }"
					hover-class="tap-hover"
					hover-stay-time="50"
					@click="scanCode"
				>
					<text class="fs-36 fw-600">扫一扫</text>
					<image
						class="absolute right-16 bottom-16 width-46 height-46"
						src="/static/img/icon-scan.png"
						mode="aspectFit"
					/>
				</view>
			</view>
		</view>
		<navigator
			url="/pages/main/search"
			:style="{
				margin: `44rpx 20rpx`,
				padding: `40rpx 45rpx`,
				boxShadow: `0 7rpx 43rpx 0 rgba(207, 207, 207, 0.3)`,
			}"
			hover-class="tap-hover"
			hover-stay-time="50"
			class="fd-row jc-sb br-20"
		>
			<view>
				<text class="fs-36 color-333 fw-700">查询</text>
				<text class="fs-28 color-ccc mt-22">搜索以往的订单</text>
			</view>
			<image
				class="width-94 height-94"
				src="/static/img/icon-selectOrder.png"
				mode="aspectFit"
			/>
		</navigator>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class Home extends Vue {
		// component property
		userInfo: AnyObject = {};
		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton();
			// #endif

			this.$request.get("/userInfo").then(({ data }) => (this.userInfo = data));
		}

		async scanCode() {
			// #ifdef APP-PLUS
			const [scanFail, scanRes]: any = await uni.scanCode({});
			if (scanFail) return;
			uni.navigateTo({ url: `/pages/main/orderDetail?order_id=${scanRes.result}` });
			// #endif

			// #ifdef H5
			uni.showToast({ title: "H5暂不支持扫一扫", icon: "none" });
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>